<template>
  <div class="canvas-page">
    <div class="canvas-box">
      <div id="canvas-page" class="canvas-editor">
        <div
          v-for="(item, index) in state.renderRecord"
          :key="index"
          v-drag="{fn: renderCanvas, value: item, index: index }"
          :class="['canvas-render', index === state.renderHoverIndex ? 'canvas-page-hover': '', index === state.renderClickIndex ? 'canvas-page-click' : ''] "
          :style="{position: 'absolute', left: item.x+'px', top:item.y+'px', background: 'url('+item.value+') 100% 100% no-repeat', backgroundSize: '100% 100%'}"
          @click="renderClick(index)"
          @mousemove="renderMousemove(index)"
          @mouseleave="renderMouseleave()"
        >
          {{ item.hover }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'CanvasPage',
    setup(props) {
        console.log(props)
        const store = useStore()
        const state = reactive({
            renderRecord: store.state.render,
            renderClickIndex: '',
            renderHoverIndex: ''
        })
        const renderMousemove = (index) => {
            state.renderHoverIndex = index
        }
        const renderMouseleave = () => {
            state.renderHoverIndex = ''
        }
        const renderClick = (index) => {
            state.renderClickIndex = index
        }
        const renderCanvas = (params) => {
            store.dispatch('setItemRender', params)
        }
        return {
            state,
            renderMousemove,
            renderMouseleave,
            renderClick,
            renderCanvas
        }
    }
}
</script>

<style scoped lang="less">
    .canvas-page {
        background: rgb(241, 243, 247);
        z-index: 1;
      .canvas-box {
          box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 15px;
          width: 375px;
          height: 607px;
        .canvas-editor {
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,1);
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

      .canvas-render {
        width: 180px;
        height: 150px;
        background: cornflowerblue;
        word-break: break-all;
        cursor: all-scroll;
      }
      .canvas-page-click {
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 4px solid rgb(255, 110, 123) !important;
          z-index: 2;
        }
      }
      .canvas-page-hover {
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 1px solid rgb(255, 110, 123);
        }
      }
      /*.canvas-render:hover {*/
      /*  border: 2px solid rgb(255, 110, 123);*/
      /*}*/
    }
</style>
